<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>个人中心</title>
    <link rel="shotcut icon" href="/f/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/f/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/f/shopv4.css?6">
    <script src="/f/jquery-3.4.1.min.js"></script>
    <script src="/f/bootstrap.bundle.min.js"></script>
    <script src="/f/vue.js"></script>

    <!--script src="/f/mock.js"></script-->
</head>

<body>
<div id="loading" class="">
  <div class="d-flex align-items-center justify-content-center" style="height: 80vh">
    <div class="spinner-border spinner-border-sm m-2" role="status">
    </div>
    <div class="fw-bold">
      正在加载游戏数据...
    </div>
  </div>
</div>

<div id="app" style="display: none;">
    <nav class="navbar navbar-expand-sm home-menu">
      <a class="navbar-brand" href="/v3.html">
          <img src="/f/logo2.webp" class="d-inline-block align-center" height="40px">
          <span style="color:#fcd144">王牌单机爱好者</span>
      </a>
      <span class="ml-auto">
        <a href="/v3.html" class="account-link">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-controller" viewBox="0 0 16 16">
            <path d="M11.5 6.027a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-1.5 1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1v-1z"/>
            <path d="M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729c.14.09.266.19.373.297.408.408.78 1.05 1.095 1.772.32.733.599 1.591.805 2.466.206.875.34 1.78.364 2.606.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773-.245-.232-.496-.526-.739-.808-.126-.148-.25-.292-.368-.423-.728-.804-1.597-1.527-3.224-1.527-1.627 0-2.496.723-3.224 1.527-.119.131-.242.275-.368.423-.243.282-.494.575-.739.808-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21.024-.826.16-1.73.365-2.606.206-.875.486-1.733.805-2.466.315-.722.687-1.364 1.094-1.772a2.34 2.34 0 0 1 .433-.335.504.504 0 0 1-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708-.276.276-.587.783-.885 1.465a13.748 13.748 0 0 0-.748 2.295 12.351 12.351 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502.212-.202.4-.423.615-.674.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504.214.251.403.472.615.674.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.354 12.354 0 0 0-.339-2.406 13.753 13.753 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465-.264-.265-.856-.523-1.733-.708-.85-.179-1.877-.27-2.913-.27-1.036 0-2.063.091-2.913.27z"/>
          </svg>
        </a>
      </span>
    </nav>

    <div class="main" v-show="page==1">
      <div class="tip text-center">
          <img v-if="info.photo" :src="info.photo" class="d-inline-block align-center" height="60px">
          <p class="card-text">
            您好， {{ info.name }}
          </p>
      </div>
      <div class="tip">
        <h5>商家信息</h5>
        <div>店铺信息: 单机永伴</div>
        <div>店铺电话: 13027732793</div>
        <div>店铺地址: 河南省郑州市中原区秦岭路六合幸福门1期10号楼1402</div>
      </div>
      <hr>

      <ul class="nav nav-tabs">
          <li class="nav-item">
              <a class="nav-link" :class="{active2:curtab==1}" @click="settab(1)">全部订单</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" :class="{active2:curtab==2}" @click="settab(2)">进行中订单</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" :class="{active2:curtab==3}" @click="settab(3)">已完成订单</a>
          </li>
      </ul>

      <ul class="list-group scrollable">
        <li class="list-group-item border-no rounded-0" v-for="(o, index) in orders">
            <div class="card" @click="openDetail(o)">
                <div class="card-horizontal">
                    <div class="card-body">
                        <h4 class="card-title card-title-red">订单号: {{ o.no }}</h4>
                        <p class="card-text">
                          <div>容量: {{ o.size|unit }} / {{ o.cap|unit }} 商品数: {{ o.games }}</div>
                          <table class="w100">
                            <tr>
                              <td>拷贝进度:</td>
                              <td style="width:180px">
                                <div class="progress">
                                  <div class="progress-bar bg-success" role="progressbar" :aria-valuenow="o.progress" :aria-valuemin="10" aria-valuemax="100" :style="{width:o.progress+'%'}">{{ o.progress.toFixed(2) }}%</div>
                                </div>
                              </td>
                            </tr>
                          </table>
                          <div class="float-left text-muted small">下单时间: {{ o.created_at|fromunix }}</div>
                        </p>
                    </div>
                </div>
            </div>
        </li>
      </ul>
      
      <div v-if="orders.length<=0">
        <p>
        <div class="text-center">
          <p class="text-muted">暂时没有任何订单哦!</p>
          <a href="/v3.html" class="btn btn-danger active" role="button" aria-pressed="true">去首页逛逛吧</a>
        </div>
      </div>
    </div>

    <div class="main" v-show="page==2">
      <h4><button class="btn btn-link" @click="page=1">< 返回订单 {{ order.no }}</button></h4>
      <ul class="list-group scrollable">
        <li class="list-group-item border-0 rounded-0" v-for="(g, index) in games">
            <div class="card">
                <div class="card-horizontal">
                    <div class="img-square-wrapper">
                        <img class="" loading="lazy" :src="g.photo" :alt="g.name" width="95" height="95">
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">{{ g.name }}</h4>
                        <div class="clearfix">
                          <p class="card-text float-left" style="font-size: 12px">{{ g.size|unit }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
      </ul>
    </div>

    <footer class="footer clearfix">
      <div class="text-center">
        <a href="/v3.html" class="btn btn-danger btn-sm active" role="button" aria-pressed="true">游戏选单</a>
      </div>
    </footer>

</div>

<script>
var apparg = {
  el: '#app',
  data: {
    info: {
      "id": 0,
      "openid": "",
      "name": "",
      "photo": ""
    }, // 个人信息
    orders: [], // 当前订单列表
    allorders: [],
    curtab: 1,
    games: [], // 详情页游戏列表
    order: {}, // 当前详情页订单
    page: 1, // 1:订单列表 2:详情页
  },
  filters: {
    unit: function(s) {
      if (s >= 1024) {
        s = s / 1024;
        s = s.toFixed(2) + 'T';
      } else if (s >= 1) {
        s = s.toFixed(2) + "G";
      } else if (s >= 0.0009765) {
        s = s * 1024
        s = s.toFixed(2) + 'M';
      } else {
        s = s * 1024 * 1024;
        s = s.toFixed(2) + 'K';
      }
      return s
    },
    fromunix: function(t) {
      var d = new Date(t*1000);
      return d.toLocaleString().replace(/\//g, "-");
    },
    status: function(s) {
      switch(s) {
        case 0: return "未开始"
        case 1: return "就绪"
        case 2: return "进行中"
        case 3: return "停止"
        case 4: return "已完成"
      }
      return ""
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    settab: function(tab) {
      this.curtab = tab;
      if (tab == 1) {
        this.orders = this.allorders;
      } else if (tab == 2) {
        this.orders = this.allorders.filter(x=>[1,2].includes(x.status))
      } else if (tab == 3) {
        this.orders = this.allorders.filter(x=>x.status==4)
      }
    },
    openDetail: async function(order) {
      this.page = 2;
      this.games = [];
      this.order = order;
      let formData = new FormData();
      formData.append('id', order.id);
      let r = await fetch("/v1/account/ordergames", {
          method: 'POST',
          body: formData,
      });
      data = await r.json();
      if (data.ok) {
        this.games = data.result;
      }

      // this.games = [
      //   {"id":1,"name":"暗黑破坏神3(英)","en":"Diablo III","aka":"暗黑3","photo":"/uploads/save/Diablo III/ICON_S.png","genres":[1,4],"des":"","size":0,"pinyin":"anheipohuaishen3(ying)","letter":"a","added":false},
      //   {"id":2,"name":"暗黑血统3","en":"Darksiders III","aka":"","photo":"/uploads/save/Darksiders III/ICON_S.png","genres":[1,4],"des":"","size":0,"pinyin":"anheixuetong3","letter":"a","added":false}
      // ];
    }
  }
};

function init() {
  fetch("/v1/account/info", {
      method: 'POST',
  }).then(function(rsp) {
      let data = rsp.json();
      return data;
  }).then(function(data){
      if (data.ok) {
        app.info = data.result;
      } else{
        //alert(data.description);
        app.info.name = data.description;
        return;
      }
  });

  fetch("/v1/account/orderlist", {
      method: 'POST',
  }).then(function(rsp) {
      let data = rsp.json();
      return data;
  }).then(function(data){
      if (data.ok) {
        app.allorders = data.result;
        app.settab(1);
      } else{
        console.log("err:", data.description);
        return;
      }
  });
}

var app = {};

$(document).ready(function() {
  $('#loading').hide();
  $('#app').show();
  app = new Vue(apparg);
  init();
});
</script>
<!--script src="/v1/mock.js"></script-->
</body>
</html>